@import "ui-mixins";
@import "ui-variables";

h1,
h2,
h3 {
  line-height: 1.2;
  margin-bottom: 1em;
  font-family: @font-family-headlines;
}

h1 {
  font-size: @font-size-h1;
}

h2 {
  font-size: @font-size-h2;
}

h3 {
  font-size: @font-size-h3;
}

h4 {
  font-size: @font-size-h4;
}

p {
  margin-bottom: 1em;
}

label {
  font-weight: normal;
}

pre {
  border-radius: 0;
  padding: @component-padding;
  font-size: inherit;
}

code {
  background: @background-color-highlight;
  border-radius: 0;
  padding: 1px 2px; // same as `.highlight`
}

.selected {
  .text(highlight);
}

.text-smaller {
  font-size: @font-size-small;
}

.text-subtle {
  .text(subtle);
}

.text-highlight {
  .text(highlight);
}

.text-error {
  .text(error);
}

.text-info {
  .text(info);

  &:hover {
    color: @text-color-info;
  }
}

.text-warning {
  .text(warning);
  &:hover { color: @text-color-warning; }
}

.text-success {
  .text(success);
  &:hover { color: @text-color-success; }
}

span.highlight-info {
  border-radius: @component-border-radius-small; // increase specificity, since “attribute selector” < “class selector”
  padding: 1px 2px;
}

.highlight-color(info, @background-color-info);
.highlight-color(warning, @background-color-warning);
.highlight-color(error, @background-color-error);
.highlight-color(success, @background-color-success);

kbd {
  color: @text-color-highlight;
}
